<template>
  <div class="h5-crm-spec">
    <!-- 头部导航 -->
    <div class="h5-header">
      <div class="header-title">客户详情</div>
    </div>

    <!-- Tab导航 -->
    <div class="h5-tabs">
      <el-tabs v-model="selectTag" @tab-change="setSelectTag" class="h5-tab-container" type="card">
        <el-tab-pane v-for="item in leftValue" :key="item.id" :label="item.label" :name="item.id">
        </el-tab-pane>
      </el-tabs>
    </div>

    <!-- 内容区域 -->
    <div class="h5-content" v-loading="loading">
      <component
        :is="detailCompent"
        :id="detailsId"
        :selectTag="selectTag"
        :nowIds="nowIds"
        :moduleOption="moduleOption"
        @setDrawer="setDrawer"
        @refreshData="emit('getPage')"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ArrowLeft } from '@element-plus/icons-vue'

import CustomerDetailsH5 from '@/views/crm/customer/detail/newIndexH5.vue'
import * as CrmModuleApi from '@/api/crm/module'

const detailCompent = ref()
const showDrawer = ref(false)
const loading = ref(false)
const detailsId = ref('')

const emit = defineEmits(['getPage'])
const leftValue = ref([])
const selectTag = ref(0)

const leftMap = {
  customer: [
    {
      label: '活动',
      id: 0
    },
    {
      label: '详细资料',
      id: 1
    },
    {
      label: 'AI摘要',
      id: 11
    },
    {
      label: '联系人',
      id: 2
    },
    {
      label: '团队成员',
      id: 3
    },
    {
      label: '商机',
      id: 5
    },
    {
      label: '合同',
      id: 6
    },
    {
      label: '回款',
      id: 7
    },
    {
      label: '回款计划',
      id: 9
    },
    {
      label: '操作日志',
      id: 10
    }
  ]
}

const setSelectTag = (val) => {
  selectTag.value = val
}

const getComponentName = {
  customer: CustomerDetailsH5
}

const moduleOption = ref([])
const nowIds = ref([])

const props = defineProps({
  customerId: String
})

watch(
  () => props.customerId,
  (val) => {
    if (val) {
      detailsId.value = val
      leftValue.value = leftMap['customer']
      detailCompent.value = getComponentName['customer']
      selectTag.value = 0
    }
  },
  { immediate: true, deep: true }
)
</script>

<style scoped lang="scss">
.h5-crm-spec {
  width: 100vw;
  height: calc(100vh - 100px);
  background: #f5f5f5;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.h5-header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
  padding: 0 16px;

  .header-left {
    flex: 1;

    .back-btn {
      color: #409eff;
      font-size: 14px;
      padding: 0;

      .el-icon {
        margin-right: 4px;
      }
    }
  }

  .header-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }

  .header-right {
    flex: 1;
  }
}

.h5-tabs {
  background: #fff;
  border-bottom: 1px solid #ebeef5;

  .h5-tab-container {
    :deep(.el-tabs__header) {
      margin: 0;

      .el-tabs__nav-wrap {
        padding: 0 16px;

        .el-tabs__nav-scroll {
          overflow-x: auto;

          .el-tabs__nav {
            display: flex;
            white-space: nowrap;

            .el-tabs__item {
              flex-shrink: 0;
              padding: 0 12px;
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              border: none;
              background: transparent;

              &.is-active {
                color: #409eff;
                background: #ecf5ff;
                border-radius: 4px;
              }
            }
          }
        }
      }
    }

    :deep(.el-tabs__content) {
      display: none;
    }
  }
}

.h5-content {
  flex: 1;
  overflow-y: auto;
  background: #f5f5f5;

  &::-webkit-scrollbar {
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
  }
}
</style>
